<template>
	<view class="next_content">
		<view class="top_list">
			<view class="list_content"
				:style="bg_active === index ? 'backgroundColor:#FFF6F6' : 'backgroundColor:#e3e3e3'"
				v-for="(item,index) in eight_Number" :key="index" @click="handleAlllist(item,index)">
				<view class="content_del">
					<image src="../../../static/image/icon-close.png" class="icon_close" @click.stop="handleDel(item,index)"></image>
				</view>
				<view class="content_middle">
					<view class="dra_item" v-for="item in eight_Number[index].red">{{ item }}</view>
				</view>
				<view class="content_multiplier">
					<view class="beilv">
						<view class="beilv_content" @click="handleAddMultiplier(item,index)">{{ item.num }}倍</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_list">
			<view class="btn" @click="handleAdd">再加一注</view>
			<view class="btn">机选</view>
			<!-- <view class="btn">幸运号</view> -->
		</view>
		
		<view class="number_list">
			<view class="number_text">号码:</view>
			<view class="number_content">
				<view
					:class="item.selected === true ? 'isBallactive' : 'isNormalball' "
					v-for="(item,index) in first_number_list" @click="handleSelectfirstnumber(item,index)">
					{{ item.name }}
				</view>
			</view>
			<view class="number_content">
				<view
					:class="item.selected === true ? 'isBallactive' : 'isNormalball' "
					v-for="(item,index) in second_number_list" @click="handleSelectsecondnumber(item,index)">
					{{ item.name }}
				</view>
			</view>
			<view class="number_content">
				<view
					:class="item.selected === true ? 'isBallactive' : 'isNormalball' "
					v-for="(item,index) in three_number_list" @click="handleSelectthreenumber(item,index)">
					{{ item.name }}
				</view>
			</view>
		</view>
		
		<view class="save" @click="handleSave">保存</view>
		
		<u-toast ref="uToast" />

		<u-modal :show="showMultiplier" showCancelButton @confirm="Multiplierconfirm" @cancel="showMultipliercancel"
			confirmColor="#FA254F">
			<view class="list_step">
				<view class="step_text">当前注的倍率</view>
				<view class="step_content">
					<u-number-box v-model="numberValue" button-size="40" color="#ffffff" bgColor="#FA254F"
						iconStyle="color: #fff" @change="valChange"></u-number-box>
				</view>
			</view>

		</u-modal>
		
		<u-modal
			:content="content"
			:show="showDel"
			showCancelButton
			@confirm="confirm"
			@cancel="cancel"
			confirmColor="#FA254F"
		></u-modal>
	</view>
</template>

<script>
	export default {
		props: ['parentData','parentlistDatathree'],
		data() {
			return {
				stepIndex: 0,
				numberValue: 1,
				delindex:'',
				showDel:false,
				showMultiplier: false,
				content:'是否确认删除，删除后无法恢复！谨慎操作',
				bg_active: 0,
				eight_Number: [{
					type:8,
					periods:'0',
					red_drag:[],
					red:[],
					blue:[],
					blue_drag:[],
					num:1,
					model:''
				}],
				first_number_list:[],
				second_number_list:[],
				three_number_list:[]
			}
		},
		created() {
			this.first_number_list = this.initializeArray();
			this.second_number_list = this.initializeArray();
			this.three_number_list = this.initializeArray();
			// if(this.parentlistDatathree.length === 0) return
			// this.eight_Number = this.parentlistDatathree.map(item => {
			// 	return {
			// 		...item,
			// 		type:8,
			// 		model:'',
			// 		num:1,
			// 		periods:'0'
			// 	}
			// })
			
			if(this.eight_Number[0] === undefined){
				return
			}
			this.first_number_list.forEach(item => {
				if(this.eight_Number[0].red[0] == item.name){
					item.selected = true
				}
			});
			this.second_number_list.forEach(item => {
				if(this.eight_Number[0].red[1] == item.name){
					item.selected = true
				}
			});
			this.three_number_list.forEach(item => {
				if(this.eight_Number[0].red[2] == item.name){
					item.selected = true
				}
			});
		},
		methods: {
				initializeArray() {
				  return Array(10).fill().map((_, index) => ({
					name: index,
					selected: false
				  }));
				},
				valChange(e) {
					this.numberValue = e.value
				},
				handleSelectfirstnumber(item,index){
					const hasSelected = this.first_number_list.some(item => item.selected);
					if (hasSelected) {
						const selectedIndex = this.first_number_list.findIndex(item => item.selected);
						this.first_number_list[selectedIndex].selected = false;
						const index1 = this.eight_Number[this.bg_active].red.indexOf(this.first_number_list[selectedIndex].name);
						if (index1 !== -1) {
							this.eight_Number[this.bg_active].red.splice(index1, 1);
						}
					}
					item.selected =! item.selected
					this.eight_Number[this.bg_active].red.unshift(item.name);
				},
				handleSelectsecondnumber(item,index){
					const hasSelected = this.second_number_list.some(item => item.selected);
					if (hasSelected) {
						const selectedIndex = this.second_number_list.findIndex(item => item.selected);
						this.second_number_list[selectedIndex].selected = false;
						const index1 = this.eight_Number[this.bg_active].red.indexOf(this.second_number_list[selectedIndex].name);
						if (index1 !== -1) {
							this.eight_Number[this.bg_active].red.splice(index1, 1);
						}
					}
					item.selected =! item.selected
					this.eight_Number[this.bg_active].red.splice(1,0,item.name);
				},
				handleSelectthreenumber(item,index){
					const hasSelected = this.three_number_list.some(item => item.selected);
					if (hasSelected) {
						const selectedIndex = this.three_number_list.findIndex(item => item.selected);
						this.three_number_list[selectedIndex].selected = false;
						const index1 = this.eight_Number[this.bg_active].red.indexOf(this.three_number_list[selectedIndex].name);
						if (index1 !== -1) {
							this.eight_Number[this.bg_active].red.splice(index1, 1);
						}
					}
					item.selected =! item.selected
					this.eight_Number[this.bg_active].red.splice(2,0,item.name);
				},
				handleAdd(){
					if(this.eight_Number[this.bg_active].red.length < 3){
						this.$refs.uToast.show({
						    type:'default',
						    message:'每一行数字必须选择一个作为号码',
						})
						return
					}
					
					this.first_number_list.forEach(item => {
						item.selected = false
					})
					this.second_number_list.forEach(item => {
						item.selected = false
					})
					this.three_number_list.forEach(item => {
						item.selected = false
					})
					this.eight_Number.push({
						type:8,
						periods:'0',
						red_drag:[],
						red:[],
						blue:[],
						blue_drag:[],
						num:1,
						model:''
					}),
					this.bg_active = this.eight_Number.length - 1
				},
				handleAddMultiplier(item,index){
					this.showMultiplier = true
					this.stepIndex = index
				},
				Multiplierconfirm(){
					this.showMultiplier = false
					this.eight_Number[this.stepIndex].num = this.numberValue
					this.numberValue = 1
				},
				showMultipliercancel(){
					this.showMultiplier = false
				},
				handleAlllist(item1,index){
					this.bg_active = index
					this.first_number_list.forEach(item => {
						item.selected = false
					})
					this.second_number_list.forEach(item => {
						item.selected = false
					})
					this.three_number_list.forEach(item => {
						item.selected = false
					})
					this.first_number_list.forEach(item => {
						if(item1.red[0] == item.name){
							item.selected = true
						}
					});
					this.second_number_list.forEach(item => {
						if(item1.red[1] == item.name){
							item.selected = true
						}
					});
					this.three_number_list.forEach(item => {
						if(item1.red[2] == item.name){
							item.selected = true
						}
					});
				},
				handleDel(item,index){
					this.showDel = true
					this.delindex = index
				},
				confirm(){
					this.eight_Number.splice(this.delindex,1)
					this.bg_active = this.eight_Number.length -1
					
					this.first_number_list.forEach(item => {
						item.selected = false
					})
					this.second_number_list.forEach(item => {
						item.selected = false
					})
					this.three_number_list.forEach(item => {
						item.selected = false
					})
					
					if(this.bg_active === -1){
						this.showDel = false
						return
					}
					
					const itemToUpdate = this.first_number_list.find(item => item.name === this.eight_Number[this.bg_active].red[0]);
					if (itemToUpdate) {
					     itemToUpdate.selected = true;
					}
					const itemToUpdate1 = this.second_number_list.find(item => item.name === this.eight_Number[this.bg_active].red[1]);
					if (itemToUpdate1) {
					     itemToUpdate1.selected = true;
					}
					const itemToUpdate2 = this.three_number_list.find(item => item.name === this.eight_Number[this.bg_active].red[2]);
					if (itemToUpdate2) {
					     itemToUpdate2.selected = true;
					}
					this.showDel = false
				},
				cancel(){
					this.showDel = false
				},
				async handleSave(){
					let params = this.eight_Number
					let res = await this.$api.inheadlottery(params)
					console.log(res)
				}
			}
		}
</script>

<style lang="scss">
	.next_content {
		width: 346px;
		margin: 0 auto;
		margin-top: 35px;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding: 10px;
		background-color: $white_color;
		border-radius: $radius_eight;

		.top_list {
			width: 95%;
			height: 200px;
			margin: 0 auto;
			border-radius: $radius_four;
			box-sizing: border-box;
			overflow: auto;
			scrollbar-width: none;
			-ms-overflow-style: none;

			&::-webkit-scrollbar {
				display: none;
			}

			.list_content {
				width: 100%;
				box-sizing: border-box;
				padding: 10px;
				border-radius: $radius_eight;
				margin-bottom: 10px;
				background-color: rgb(227, 227, 227);
				display: flex;
				.content_del {
					flex: 0.15;
					@include centerAline();
					.icon_close {
						width: 30px;
						height: 30px;
					}
				}

				.content_middle {
					flex: 0.7;
					@include centerAline();
					justify-content: space-around;
						.dra_item {
							width: 30px;
							height: 35px;
							margin-left: 3px;
							text-align: center;
							line-height: 25px;
							font-weight: bold;
							background-image: url('../../../static/image/red_ball.png');
							background-size: 100% 100%;
							background-repeat: no-repeat;
							font-weight: bold;
							font-size: $font-size-12;
							color: $white_color;
						}
					.middle_middle {
						width: 100%;
						display: flex;
						margin-top: 5px;
						@include centerAline();
						.top_text{
							flex: 0.2;
							font-size: $font-size-14;
							font-weight: bold;
							@include centerAline();
						}
						.bottom_content {
							flex: 0.8;
							display: flex;
							flex-wrap: wrap;
							.red_all_nums {
								width: 30px;
								height: 30px;
								background-image: url('../../../static/image/red_ball.png');
								background-size: 95% 95%;
								color: $white_color;
								text-align: center;
								line-height: $line-height-25;
								font-weight: bold;
								font-size: $font-size-12;
								margin-left: 3px;
								margin-top: 3px;
							}
						}
					}

					.middle_bottom {
						width: 100%;
						display: flex;
						margin-top: 5px;
						.top_text{
							flex: 0.2;
							font-size: $font-size-14;
							font-weight: bold;
							@include centerAline();
						}
						.bottom_content {
							flex: 0.8;
							display: flex;
							flex-wrap: wrap;

							.red_all_nums {
								width: 25px;
								height: 30px;
								background-image: url('../../../static/image/red_ball.png');
								background-size: 95% 95%;
								color: $white_color;
								text-align: center;
								line-height: $line-height-25;
								font-weight: bold;
								font-size: $font-size-12;
								margin-left: 3px;
								margin-top: 3px;
							}
						}
					}
				}

				.content_multiplier {
					flex: 0.15;
					@include centerAline();

					.beilv {
						flex: 0.1;
						@include centerAline();

						.beilv_content {
							text-align: center;
							font-weight: bold;
							background-color: $primary_color;
							color: $white_color;
							border-radius: $radius_four;
							box-sizing: border-box;
							padding: 5px;
						}
					}
				}
			}
		}

		.btn_list {
			width: 95%;
			margin: 0 auto;
			height: 60px;
			box-sizing: border-box;
			padding: 10px;
			display: flex;
			justify-content: space-around;

			.btn {
				width: 90px;
				height: 36px;
				background: linear-gradient(to right, #FF5A43, #FA2450);
				border-radius: $radius_30;
				text-align: center;
				line-height: $line-height-36;
				font-size: $font-size-14;
				color: $white_color;
			}
		}

		.next_top {
			width: 100%;
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;

			.next_top_left {
				flex: 0.3;

				.left_btn {
					width: 88px;
					height: 32px;
					border: 1px solid $primary_color;
					text-align: center;
					line-height: $line-height-32;
					color: $primary_color ;
					border-radius: $radius_16;
				}

				.left_change_btn {
					width: 88px;
					height: 32px;
					border: 1px solid $primary_color;
					text-align: center;
					line-height: $line-height-32;
					color: $white_color ;
					border-radius: $radius_16;
					background: linear-gradient(to right, #FF5A43, #FA2450)
				}
			}

			.next_top_right {
				flex: 0.7;
				text-align: right;
				line-height: $line-height-32;
				font-weight: bold;
			}
		}

		.number_list {
			width: 100%;

			.number_text {
				width: 100%;
				height: 20px;
				margin-top: 10px;
				font-size: $font-size-14;
				font-weight: bold;
				color: $primary_color;
				line-height: $line-height-20;
			}

			.number_content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.isNormalball {
					width: 25px;
					height: 25px;
					border-radius: 50%;
					background-color: $qgray_color;
					border: 1px solid $gray_color;
					margin-left: 5px;
					margin-top: 10px;
					text-align: center;
					line-height: $line-height-25;
					color: $black_color;
					font-weight: bold;
					font-size: 12px;
				}

				.isBallactive {
					width: 30px;
					height: 35px;
					border-radius: 50%;
					margin-left: 5px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/red_ball.png');
					background-size: 100% 100%;
				}

				.isUnionactive {
					width: 27px;
					height: 27px;
					border-radius: 50%;
					margin-left: 10px;
					margin-top: 10px;
					text-align: center;
					line-height: 27px;
					color: $white_color;
					font-weight: bold;
					font-size: $font-size-12;
					background-image: url('../../../static/image/z_text_ball.png');
					background-size: 100% 100%;
				}
			}
		}
		.save{
			width: 95%;
			height: 36px;
			margin: 0 auto;
			margin-top: 20px;
			border-radius: $radius_30;
			text-align: center;
			line-height: 36px;
			color: $white_color;
			font-size: $font-size-14;
			font-weight: bold;
			background: linear-gradient(to right, #FF5A42, #F92350)
		}
		.list_step {
			width: 300px;
			height: 200px;

			.step_text {
				width: 100%;
				height: 40px;
				box-sizing: border-box;
				padding: 10px;
				font-size: $font-size-20;
				color: $black_color;
				line-height: $line-height-40;
				font-weight: bold;
			}

			.step_content {
				width: 100%;
				height: 160px;
				@include centerAline();
			}
		}
	}
</style>